.dialog {
  .dialog-mask,
  .dialog-wrap {
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    top: 0;
    z-index: 1000;
  }

  .dialog-mask {
    background-color: rgba(55, 55, 55, 0.6);
    height: 100%;
  }
  .dialog-wrap {
    overflow: auto;

    .dialog-center-fixed {
      margin-left: calc(100vw - 100%);
      height: 0;
    }
  }

  .dialog-wrap {
    &.wrap--hide {
      display: none !important;
    }
  }
  .dialog-main {
    margin: 0 auto;
    width: 640px;
    position: relative;
    top: 100px;
    background-color: #FFF;
    border-radius: 4px;
    overflow: hidden;
  }

  .fade-enter-active, .fade-leave-active {
    transition: opacity .3s /* cubic-bezier(0.6, -0.28, 0.735, 0.045)*/
  }
  .fade-enter-from, .fade-leave-to {
    opacity: 0;
  }

  .ease-enter-active, .ease-leave-active {
    transition: opacity .3s cubic-bezier(0.6, -0.28, 0.735, 0.045), transform .3s linear;
  }
  .ease-enter-from, .ease-leave-to {
    opacity: 0;
    transform: scale(0.9);
  }
}

@keyframes loading-rotate {
  to {
    transform: rotate(1turn)
  }
}
@keyframes loading-dash {
  0% {
    stroke-dasharray: 1,200;
    stroke-dashoffset: 0
  }

  50% {
    stroke-dasharray: 90,150;
    stroke-dashoffset: -40px
  }

  to {
    stroke-dasharray: 90,150;
    stroke-dashoffset: -120px
  }
}